<template>

  <van-nav-bar :title="pageTitle" @click-right="onClickUser" left-arrow @click-left="onBack">
    <template #right>
      <div style="height: 100%; display: flex; align-items: center;">
        <img :src="currentUserAvatar" alt="个人中心" class="nav-bar-avatar"/>
      </div>
    </template>
  </van-nav-bar>

  <van-form @submit="onSubmit">
    <van-field v-model="form.title" label="活动标题" placeholder="请输入活动标题" required />
    <van-field
        v-model="form.info"
        label="活动内容"
        placeholder="请输入活动详细内容"
        type="textarea"
        rows="4"
        autosize
        required
    />
    <van-field v-model="form.place" label="活动地点" placeholder="请输入活动地点" required />

    <!-- 活动开始和结束时间 -->

    <van-field v-model.number="form.size" label="人数限制" type="number" placeholder="请输入活动人数限制" required />


    <!-- 此处添加其他字段 -->
    <div class="submit-button">
      <van-button round block type="primary" native-type="submit">立即提交</van-button>
    </div>
  </van-form>
</template>

<script>
import { Form, Field, Button, DatePicker, TimePicker, Popup, } from 'vant';
export default {
  components: {
    'van-form': Form,
    'van-field': Field,
    'van-button': Button,
    'van-date-picker': DatePicker,
    'van-time-picker': TimePicker,
    'van-popup': Popup
  },
  data() {
    return {
      pageTitle: '活动创建',
      currentUserAvatar: '/avatars/avatar.jpg',
      showStartDatePicker: false,
      showStartTimePicker: false,
      startDate: new Date(),
      startTime: '09:00',
      endDate: new Date(),
      endTime: '18:00',
      form: {
        catIds: [],
        title: '',
        info: '',
        place: '',
        startTime: '',
        endTime: '',
        applyTime: '',
        applyEndTime: '',
        size: null,
        qn: [],
      }
    };
  },
  methods: {
    onBack() {
      this.$router.go(-1);
    },
    onClickUser() {
      // 当点击导航栏右侧按钮时，跳转到 /user 路径
      this.$router.push('/user');
    },
    onSubmit(event) {
      event.preventDefault();
      // 在这里实现表单提交逻辑
      console.log(this.form);
    },
  }
};
</script>

<style scoped>
.submit-button {
  margin-top: 20px;
}

</style>
